<template>
  <div>
    <el-descriptions
      class="margin-top"
      title="非主流"
      :column="3"
      size=""
      border
    >
      <template slot="extra">
        <el-button type="primary" size="small" @click="changeNews"
          >刷新</el-button
        >
      </template>
      <el-descriptions-item>
        <template slot="label"> ID </template>
        {{ dicta.id }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label"> 来源 </template>
        {{ dicta.origin }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label"> 日期 </template>
        {{ toTime(dicta.created_at) }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label"> 标签 </template>
        {{ dicta.tag }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label"> 内容 </template>
        {{ dicta.content }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider></el-divider>

    <el-input
      type="textarea"
      v-model="joke"
      :autosize="{ minRows: 2 }"
    ></el-input>

    <el-divider></el-divider>

    <el-image
      style="width: 300px; height: 300px"
      :src="cat.url"
      fit="fill"
    ></el-image>
    <!-- 动态控制标签的大小 -->
    <!-- <el-image :style="cat.style" :src="cat.url" fit="fill"></el-image> -->

    <el-divider></el-divider>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Mall',
  data () {
    return {
      joke: '',
      cat: {
        url: '',
        style: ''
      },
      dicta: {},
      timer: null
    }
  },
  created () {
    this.changeNews()
    // this.timer = setInterval((_) => {
    //   this.changeNews()
    // }, 5000)
  },

  // !注意beforeDestory不可以
  destroyed () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    changeNews () {
      this.getJokes()
      this.getCatImage()
      this.getDicta()
    },
    getJokes () {
      axios({
        methods: 'get',
        url: 'https://api.vvhan.com/api/joke'
      }).then((response) => {
        // console.log(response.data);
        this.joke = response.data
      })
    },
    getCatImage () {
      axios({
        methods: 'get',
        url: 'https://api.thecatapi.com/v1/images/search?size=full'
      }).then((response) => {
        console.log(response.data)
        this.cat.url = response.data[0].url
        this.cat.style = `width: ${response.data[0].width}px; height: ${response.data[0].height}px`
        console.log(this.cat)
      })
    },
    getDicta () {
      axios({
        methods: 'get',
        url: 'https://api.xygeng.cn/one'
      }).then((response) => {
        console.log(response.data)
        this.dicta = response.data.data
      })
    }
  },
  computed: {
    // 转换时间格式
    toTime () {
      return function (time) {
        const res = String(time).split('')

        res.forEach((item, index, self) => {
          if (item === 'T') {
            self.splice(index, 1, ' ')
          }
          if (item === '+') {
            self.splice(index, 6)
          }
        })
        return res.join('')
      }
    }
  }
}
</script>

<style>
</style>
